//.vue 后缀文件都为一个vue 组件文件
// 定义一个html区域块
<template>
    <header class= "box">
        <div>
            <i>{{ text }}</i>
            <span class= "span" @click="clickSpan()">{{ title }}</span>
            <p v-show="flag">天官赐福</p>
            <p v-show="!flag">百无禁忌</p>
            <input type="text" v-model="title">
        </div>
    </header>
</template>

//定义一个js区域块
<script>
    // 默认导出组件，会加载好样式和结构，并实现双向绑定
    export default {
        // render(ce) {
        //     return ce('div',['天官赐福，百无禁忌'])
        // }
        data() {
            return {
                text: 'logo',
                title: '天官赐福，百无禁忌',
                flag: true
            }
        },
        methods:{
            clickSpan() {
                console.log(22222222)
                clearInterval(timer)
                var timer = setInterval(() => {
                    if(this.flag){
                        this.flag = false
                    }else{
                        this.flag = true
                    }                    
                }, 2000);
            }
        }
    }

    console.log(11111111)
</script>
// 定义一个css区域块
// scoped 仅供当前页面使用会在操作过的标签上增加一个 data-v-57509004 属性
<style scoped>
    .box {
        background-color: pink;
        font-size: 2rem;
    }
    .span {
        margin-left: 20px;
        cursor: pointer;
        /* DOM操作时元素不被选中 */
        user-select: none;  
    }
</style>